<template>
  <div style="text-align: center; margin: 20px 0 30px 0">
    <a-space >
      <a-input
          style="width:500px;height: 40px;"
          placeholder="请输入比赛名称"
          v-model="form.matchTitle"
          allow-clear
      />
      <a-button type="primary" style="height: 40px;width: 100px;" @click="getList">搜 索</a-button>
    </a-space>
  </div>
  <div v-if="list.length != 0">
    <a-row :gutter="[16, 16]">
      <a-col :span="8" v-for="(item, index) in list" :key="index">
        <a-card @click="click(item)">
          <a-descriptions
              :data="[
                {
                  label: '主办方',
                  value: item.matchHost
                },
                {
                  label: '比赛类型',
                  value: item.matchType == 0 ? '个人赛' : '团队赛'
                },
                {
                  label: '比赛简介',
                  value: item.intro
                },
                {
                  label: '开始时间',
                  value: item.startTime
                },
                {
                  label: '结束时间',
                  value: item.endTime
                }
            ]"
              :column="1"
          >
            <template #title>
              <a-space>
                {{ item.matchTitle }}
                <a-tag color="blue" v-if="getTimeStatus(item) === 0" >未开始</a-tag>
                <a-tag color="green" v-if="getTimeStatus(item) === 1">进行中</a-tag>
                <a-tag color="red" v-if="getTimeStatus(item) === 2" >已结束</a-tag>
              </a-space>
            </template>
          </a-descriptions>
        </a-card>
      </a-col>
    </a-row>
    <div style="margin: 20px 0;float: right">
      <a-pagination
          :total="totalNum"
          show-page-size
          v-model:current="page.current"
          v-model:page-size = "page.pageSize"
          show-total
          show-jumper
          @change="getList"
          @page-size-change="getList"
          :page-size-options="[
           3,6,9,12,15
        ]"
      />
    </div>
  </div>
  <div v-else>
    <a-empty description="暂无数据" />
  </div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import request from "../../axios/axios.ts";

import router from "../../router";

const totalNum = ref(0)
const list = ref([])

const page = ref({
    current: 1,
    pageSize: 6,
})

const form = ref({
  matchTitle: "",
})

onMounted(() => {
  getList()
})
const getList = () => {
  request.post("/api/match/query/page", {
      ...form.value,
    page: {
        ...page.value
    }
  }).then(res => {
    const {records, total}  = res.data.data
    totalNum.value = total as number
    list.value = records
  })
}

const click = (item) => {
  router.push("/match/view?id=" + item.id)
}

const getTimeStatus = (item) => {
  const nowTime = new Date().getTime()
  const startTime = new Date(item.startTime).getTime()
  const endTime = new Date(item.endTime).getTime()
  if (nowTime < startTime){
    return 0
  }else if (nowTime > startTime && nowTime < endTime){
    return 1
  }else {
    return 2
  }
}
</script>

<style scoped>

</style>
